<template>
	<view>
		<view class="wrap">

			<view class="cu-form-group">
				<view class="title">小区</view>
				<picker @click="PickerChange" :value="repairScopeIndex" :range="repairScopes" :range-key="'name'"
					@change="repairScopeChange">
					<view class="picker">
						{{repairScopes[repairScopeIndex].name}}
					</view>
				</picker>
			</view>

			<view class="cu-form-group">
				<view class="title">开始时间</view>
				<picker mode="multiSelector" start="2020-01-01" end="2050-09-01" @click="startDate"
					:range="dateTimeArray" :value="dateIndex">
					<view class="picker">
						{{starttime}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">结束时间</view>
				<picker mode="multiSelector" start="2020-01-01" end="2050-09-01" @click="endDate">
					<view class="picker">
						{{endtime}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">可分享数</view>
				<input name="sharelimit" class="tar" placeholder="不限" @click="sharelimitInput"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">可开次数</view>
				<input name="openlimit" class="tar" placeholder="不限" @click="openlimitInput"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">分享权限</view>
				<switch bindchange="shareabilityChange"></switch>
			</view>
			<view class="cu-form-group">
				<view class="title">申请人</view>
				王大锤
			</view>
			<view class="cu-form-group bt1 mt10">
				<view class="title">备注</view>
				<input name="remark" placeholder="备注内容" @click="remarkInput"></input>
			</view>
		</view>
		<view class="applyBtn">
			<button type="primary">提交申请</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				repairScopeIndex: 0, //默认小区
				repairScopes: [{
						id: '001',
						name: '碧桂园小区'
					},
					{
						id: '002',
						name: '南窑头小区'
					},
					{
						id: '003',
						name: '高科园园小区'
					},
					{
						id: '004',
						name: '嘉天国际小区'
					}
				],
				looding: '../../images/looding.gif',
				hidelood: false,
				user_id: 0, //锁管理员id
				dateTimeArray: null,
				dateTime: null,
				dateIndex: [0, 0, 0, 0, 0, 0],
				dateTimeArray1: null,
				dateTime1: null,
				dateIndex1: [0, 0, 0, 0, 0, 0],
				startYear: 2020,
				endYear: 2050,
				nowdate: '',
				starttime: '2020-01-01',
				endtime: '2090-01-01',
			};
		},
		onLoad: function(options) {
			var that = this;
			var date = new Date();
			var timestamp = Date.parse(new Date());
			console.log(timestamp, "事件")
			timestamp = timestamp / 1000;
			var nowdate = that.timestampToTime(timestamp, 'Y-m-d H:i:s');
			var enddate = that.timestampToTime(timestamp + 31536000, 'Y-m-d H:i:s');
			console.log("111", enddate)
			// 获取完整的年月日 时分秒，以及默认显示的数组
			var obj = dateTimePicker.dateTimePicker(that.data.startYear, that.data.endYear, nowdate);
			var obj1 = dateTimePicker.dateTimePicker(that.data.startYear, that.data.endYear, enddate);
			console.log("111", obj)
			// 精确到分的处理，将数组的秒去掉
			// var lastArray = obj1.dateTimeArray.pop();
			// var lastTime = obj1.dateTime.pop();
			// that.setData({
			this.dateIndex = obj.dateTime,
				this.dateTimeArray = obj.dateTimeArray,
				this.dateTimeArray1 = obj1.dateTimeArray,
				this.dateIndex1 = obj1.dateTime,
				this.nowdate = nowdate,
				this.starttime = nowdate,
				this.endtime = enddate
			// });
			// if (options.lock_id != undefined && options.lock_id > 0) {
			// 	that.setData({
			// 		lock_id: options.lock_id
			// 	});
			// }
			// if (options.user_id != undefined && options.user_id > 0) {
			// 	that.setData({
			// 		user_id: options.user_id //锁管理员id
			// 	});
			// }
		},
		methods: {
			// 选择小区
			repairScopeChange: function(e) {
				this.repairScopeIndex = e.target.value //取其下标
				let selected = this.repairScopes[this.repairScopeIndex] //获取选中的数组
			},
			// 查询可开门时间段
			getTimes: function() {
				var that = this;
				wx.request({
					url: app.globalData.domain + '/api/Locktimes/getopentimes',
					method: 'POST',
					header: {
						"Authorization": app.globalData.token
					},
					data: {
						lock_id: that.data.lock_id,
						limit: 100,
						page: 1
					},
					success: function(res) {
						// //console.log('getTimes-res');
						// //console.log(res);
						var arr = [];
						if (res.data.status == 200) {
							var arrdata = res.data.data.list
							if (arrdata.length > 0) {
								for (var i = 0; i < arrdata.length; i++) {
									arrdata[i]['id'] = arrdata[i]['locktimes_id'];
									arrdata[i]['name'] = arrdata[i]['locktimesname'];
									arr.push(arrdata[i]);
								}
							}
							that.setData({
								opentimesarr: arr
							});
						}
					}
				})
			},
			startDate(e) {
				var dateTimeArray = this.data.dateTimeArray;
				var dateTime = e.detail.value;
				var endtime = dateTimeArray[0][dateTime[0]] + '-' + dateTimeArray[1][dateTime[1]] + '-' + dateTimeArray[2][
					dateTime[2]
				] + ' ' + dateTimeArray[3][dateTime[3]] + ':' + dateTimeArray[4][dateTime[4]] + ':' + dateTimeArray[5][
					dateTime[5]
				];
				this.setData({
					dateIndex: dateTime,
					starttime: endtime
				});
			},
			endDate(e) {
				var dateTimeArray = this.data.dateTimeArray1;
				var dateTime = e.detail.value;
				var endtime = dateTimeArray[0][dateTime[0]] + '-' + dateTimeArray[1][dateTime[1]] + '-' + dateTimeArray[2][
					dateTime[2]
				] + ' ' + dateTimeArray[3][dateTime[3]] + ':' + dateTimeArray[4][dateTime[4]] + ':' + dateTimeArray[5][
					dateTime[5]
				];
				this.setData({
					dateIndex1: dateTime,
					endtime: endtime
				});
			},
			sharelimitChange: function(e) {
				this.setData({
					sharelimit: e.detail.value ? 1 : 0
				});
			},
			shareabilityChange: function(e) {
				this.setData({
					shareability: e.detail.value ? 1 : 0
				});
			},
			timestampToTime: function(timestamp, format) {
				if (timestamp == undefined || timestamp == 0) {
					return '';
				}
				var date = new Date(timestamp * 1000);
				var Y = date.getFullYear() + '-';
				var m = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var d = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
				var H = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
				var i = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
				var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				if (format == 'Y-m-d') {
					return Y + m + d;
				}
				return Y + m + d + H + i + s;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		background: #fff;
		box-sizing: border-box;
	}

	.wrap {
		width: 100%;
		padding: 0rpx 0 20rpx 30rpx;
		box-sizing: border-box;
	}

	.cu-form-group .picker {
		height: 90rpx;
		font-size: 32rpx;
	}

	.tar {
		text-align: right;
	}

	.cu-form-group.checkgroup {
		min-height: 60rpx;
		height: 60rpx;
		background-color: #fff;
	}

	.cu-form-group.checkgroup+.cu-form-group.checkgroup {
		border-top: 0;
	}

	.bb1 {
		border-bottom: 1rpx solid #eee;
	}

	.bt1 {
		border-top: 1rpx solid #eee;
	}

	.mb10 {
		margin-bottom: 20rpx;
	}

	.mt10 {
		margin-top: 20rpx;
	}
	.applyBtn{
		width: 100%;
		height: 100rpx;
		background: white;
		position: fixed;
		bottom: 0rpx;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		button{
			width: 400rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 30rpx;
		}
	}
</style>
